<template>
  <div class="background">
    <img class="img" src="../assets/background.png" alt>
    <h1 class="title">海量优质人才，在线约面</h1>
    <h2 class="title1">找人才就上招聘网</h2>
    <div class="login_container">
      <!-- 登录块 -->
      <div class="login_box">
        <!-- 头像 -->
        <!--        <div class="avatar_box">-->
        <!--          <img class="img" src="../assets/image.jpg" alt>-->
        <!--        </div>-->
        <h3 class="login_title">一键注册YZC直聘</h3>
        <div>
          <el-button type="info" @click="next">我要招人</el-button>
          <el-button type="danger">我要找工作</el-button>
        </div>
        <!-- 表单区域 -->
        <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" class="login_form" label-width="80px">
          <!-- 用户名 -->
          <el-form-item prop="name">
            <el-input v-model="registerForm.userName" class="input_model" prefix-icon="el-icon-user" />
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input v-model="registerForm.userPassword" class="input_model" prefix-icon="el-icon-lock" type="password" />
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="register()">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据对象
      registerForm: {
        userName: '',
        userPassword: ''
      },
      // 验证对象
      registerRules: {
        // 校验用户名
        userName: [
          // 必填项验证
          { required: true, message: '用户名', trigger: 'blur' },
          // 长度验证
          { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
        ],
        // 校验密码
        userPassword: [
          // 必填验证
          { required: true, message: '密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 ~ 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    register() {
      this.$refs.registerFormRef.validate(async valid => {
        // 校验失败
        if (!valid) return
        // 访问后台
        console.log(this.registerForm)
        const { data: res } = await this.$http.post('/user/registerUser', this.registerForm)
        //
        if (res.code === 0) {
          // 信息提示正确
          this.$message.success('操作成功！')
          window.sessionStorage.setItem('user', res.user)
          // 页面路由跳转
          this.$router.push({ path: '/' })
        } else {
          // 信息错误提示
          this.$message.error('操作失败！')
        }
      })
    },
    next() {
      // 跳转至指定地址
      this.$router.replace('/registerCompany')
    }
  }
}
</script>

<style lang="scss" >
  .background{
    position: absolute;
    background-color: #12ADA9;
    width: 100%;
    height: 100%;
  }
  .title{
    position: absolute;
    font-family: PingFangSC-Semibold;
    font-size: 48px;
    color: #ffffff;
    top: 18%;
    left: 21%;
  }
  .title1{
    position: absolute;
    font-family: PingFangSC-Semibold;
    font-size: 26px;
    color: #ffffff;
    top: 27%;
    left: 32%;
  }
  .img{
    width: 40%;
    position: absolute;
    left: 15%;
    top: 25%;
  }
  /*根节点样式*/
  .login_container{
    /*background-color: #12ADA9;*/
    height: 100%;
  }
  .login_box{
    position: absolute;
    top: 48%;
    left: 78%;
    height: 450px;
    transform: translate(-50%, -50%);
    width: 450px;
    // padding: 40px;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
  }
  .login_title{
    font-weight: normal;
    font-size: 26px;
    line-height: 32px;
    color: #00C2B3;
    position: center;
    margin-top: 50px;
    margin-left: 120px;
  }
  .login_form.el-form{
    top: 95px;
  }
  .el-button--info {
    color: #000000;
    background-color: #ffffff;
    border-color: #dfe6e9;
    width: 120px;
    border-radius: 0px;
    margin-top: 20px;
    margin-left: 95px;
  }
  .el-button--info:hover{
    color: #12ADA9;
    background-color: #ffffff;
    border-color: #12ADA9;
  }
  .el-button--info:focus{
    color: #12ADA9;
    background-color: #ffffff;
    border-color: #12ADA9;
  }
  .el-button--danger {
    color: #12ADA9;
    background-color: #ffffff;
    border-color: #12ADA9;
    width: 120px;
    border-radius: 0px;
    margin-top: 20px;
    margin-left: 95px;
  }
  .el-button--danger:hover{
    color: #12ADA9;
    background-color: #ffffff;
    border-color: #12ADA9;
  }
  .el-button--danger:focus{
    color: #12ADA9;
    background-color: #ffffff;
    border-color: #12ADA9;
  }
  .login_form .el-input__inner{
    color: #2c3e50;
    border-color: #dfe6e9;
    border-radius: 0px;
  }
  .login_form .el-input__inner:hover{
    border-color: #12ADA9;
  }
  .login_form .el-input__inner:focus{
    border-color: #12ADA9;
  }

  .login_box .avatar_box{
    position: absolute;
    width: 130px;
    height: 130px;
    // border: 1px solid #eee;
    border-radius: 50%;
    padding: 0.1px;
    box-shadow: 0 0 5px #eee;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .login_box .avatar_box .img{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #243F58;
  }

  .login_form{
    margin-top: 100px;
    position: absolute;
    // bottom: 0%;
    width: 80%;
    padding: 0 10px;
    // box-sizing: border-box;
  }

  .btns{
    display: flex;
    justify-content: flex-end;
  }

  .el-button--primary {
    color: #fff;
    background-color: #00C2B3;
    border-color: #00C2B3;
    width: 260px;
    border-radius: 0px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #12ADA9;
    border-color: #12ADA9;
  }
  .el-button--primary:focus {
    color: #fff;
    background-color: #12ADA9;
    border-color: #12ADA9;
  }
</style>
